<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>尺寸属性</title>
		<style>
			span{
				font-size: 2em;
				color: rgb(26,255,0);
				background-color: rgba(86,135,72,.1);
			}
			/* -------------最大，小宽度问题----------------- */
			div#container{/*权值：101*/
				background-color: #ffff7f;
			}
			div.box{
				background-color: #ff0000;
				color: #fff;
				width: 80%;
				/*最大宽度与普通宽度同时出现，以最大宽度为准*/
	            max-width: 650px;
				/*最小宽度，页面承受最小宽度，小于尺寸，字体或者图片位置不变
				同时出现min-width和max-width,最小值大于最大值，以最小值优先
				*/
				min-width: 500px;
			}
		</style>
	</head>
	<body>
		<!-- 所有属性值的单位
		 常用尺寸单位：%，px 像素 绝对值，em 移动端 倍数
		 常用颜色单位：网页三原色：红，绿，蓝，组成页面上的所有颜色
		             rgb(0~255，0~255，0~255)
					 rgba(0~255，0~255，0~255，0~1) 遮罩层
					 #rrggbb 十六进制    组成：0~9  a~z  A~Z
					  常用十六进制：#000000 黑色    #ffffff   白色
					  简写十六进制：#ff0   #000   #fff
		 -->
		 <span>lorem</span>
		 <!--自适应：最大，小宽高    最小和最大宽度-->
		 <div id="container">
		 	<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, animi. Assumenda asperiores repellendus rerum consequatur nihil quaerat sunt tempora laborum, consequuntur at. Quia officia quidem porro eaque quisquam deleniti autem.</div>
		 </div>
	</body>
</html>